<template>
  <div class="contact-us">

    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-title">联系我们</div>
      <div class="header-subtitle">如有问题，请随时联系我们</div>
    </div>

    <!-- 联系人列表 -->
    <div class="contact-list">
      <template v-for="(contact, index) in contactNumberOptions" :key="index">
        <div class="contact-item">
          <div class="contact-info">
            <div class="contact-name">{{ contact.label }}</div>
          </div>
          <div class="contact-phone">
            <span class="phone-number">{{ contact.value }}</span>
            <div class="phone-icon" @click="makeCall(contact.value, contact.label)">
              <span>📞</span>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 其他联系方式 -->
    <div class="other-contact">

      <!-- 工作时间 -->
      <div class="work-time">
        <div class="section-title">工作时间</div>
        <div class="time-info">
          <div class="time-item">
            <span class="time-label">周一至周五</span>
            <span class="time-value">09:00 - 18:00</span>
          </div>
          <div class="time-item">
            <span class="time-label">周六周日</span>
            <span class="time-value">10:00 - 17:00</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Return from '@/components/Return.vue'

// 响应式数据
const showQR = ref(false)
const contactNumberOptions = ref([])
// 联系人列表
const contactList = ref([
  {
    name: '客服小王',
    role: '客服专员',
    phone: '400-123-4567'
  },
  {
    name: '技术支持',
    role: '技术部',
    phone: '138-0000-1234'
  },
  {
    name: '商务合作',
    role: '商务部',
    phone: '139-0000-5678'
  },
  {
    name: '投诉建议',
    role: '质量部',
    phone: '136-0000-9999'
  }
])

// 拨打电话
const makeCall = (phoneNumber, contactName) => {
  uni.showModal({
    title: '拨打电话',
    content: `确定要拨打 ${contactName} 的电话：${phoneNumber} 吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: phoneNumber,
          success: () => {
            console.log('拨打电话成功')
          },
          fail: (error) => {
            console.error('拨打电话失败:', error)
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      }
    }
  })
}

onMounted(() => {
  getContactNumber()
})
const getContactNumber = async () => {
  const { data } = await Fetch('shopping/dict/data/type/contact_number', { method: 'get' })
  if (data.code === 200) {

    contactNumberOptions.value = data.data.map(item => ({
      label: item.dictLabel,
      value: item.dictValue
    }))
    console.log(contactNumberOptions, 'contactNumberOptions');

  }
}
</script>

<style lang="scss" scoped>
.contact-us {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.page-header {
  text-align: center;
  padding: 60rpx 0 40rpx;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  .header-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }

  .header-subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.contact-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.contact-info {
  flex: 1;

  .contact-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 8rpx;
  }

  .contact-role {
    font-size: 24rpx;
    color: #999;
  }
}

.contact-phone {
  display: flex;
  align-items: center;
  gap: 20rpx;

  .phone-number {
    font-size: 30rpx;
    color: #007AFF;
    font-weight: 500;
  }

  .phone-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);

    &:active {
      transform: scale(0.95);
      box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
    }

    img {
      width: 32rpx;
      height: 32rpx;
      filter: brightness(0) invert(1); // 将图标变为白色
    }
  }
}

.other-contact {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 32rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.contact-action {
  .action-btn {
    width: 64rpx;
    height: 64rpx;
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);

    &:active {
      transform: scale(0.95);
      box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.4);
    }

    img {
      width: 32rpx;
      height: 32rpx;
      filter: brightness(0) invert(1);
    }
  }
}

.work-time {
  margin-top: 40rpx;

  .time-info {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 24rpx;
  }

  .time-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;

    &:not(:last-child) {
      border-bottom: 1rpx solid #e9ecef;
    }

    .time-label {
      font-size: 28rpx;
      color: #666;
    }

    .time-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

// 二维码弹窗样式
.qr-dialog {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;

  .qr-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 32rpx;
  }

  .qr-code {
    width: 400rpx;
    height: 400rpx;
    margin: 0 auto 24rpx;
    border: 1rpx solid #f0f0f0;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 360rpx;
      height: 360rpx;
    }
  }

  .qr-tip {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 32rpx;
  }

  .qr-close {
    width: 200rpx;
    height: 72rpx;
    background: #f0f0f0;
    color: #333;
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-size: 28rpx;

    &:active {
      background: #e0e0e0;
    }
  }
}
</style>
